<script setup lang="ts">
import { PropType, ref, computed } from 'vue'
import { useRouter } from 'vue-router'
import type { TableData } from '@/api/group/types'
import { ElTable, ElTableColumn } from 'element-plus'

const router = useRouter()

const props = defineProps({
  currentRow: {
    type: Object as PropType<Nullable<TableData>>,
    default: () => null
  },
  oprs: {
    type: Array as PropType<any[]>,
    default: () => []
  }
})

// 使用从父组件传递过来的 oprs 数据
const filteredMembers = computed(() => {
  // 如果父组件传递了 oprs 数据，使用它；否则使用 currentRow 中的 oprs
  const operatorList = props.oprs.length > 0 ? props.oprs : (props.currentRow?.oprs || [])
  return Array.isArray(operatorList) ? operatorList : []
})

// 计算操作员总数
const operatorCount = computed(() => {
  return filteredMembers.value.length
})

// 处理行点击，跳转到 account-dialog
const handleRowClick = (row: any) => {
  // 将 name 作为查询参数传递
  router.push({
    path: '/account/account-dialog',
    query: {
      search: row.name
    }
  })
}
</script>

<template>
  <div class="member-list">
    <div class="list-header">
      <h4>数目: {{ operatorCount }}</h4>
    </div>
    
    <ElTable 
      :data="filteredMembers" 
      style="width: 100%"
      max-height="300"
      border
      @row-click="handleRowClick"
    >
      <ElTableColumn 
        prop="id" 
        label="操手ID" 
        width="80"
        align="center"
      />
      <ElTableColumn 
        prop="name" 
        label="操手" 
        align="center"
      />
    </ElTable>
  </div>
</template>

<style scoped>
.member-list {
  padding: 10px;
}

.list-header {
  margin-bottom: 15px;
  border-bottom: 1px solid #ebeef5;
  padding-bottom: 10px;
}

.list-header h3 {
  margin: 0;
  color: #303133;
  font-size: 16px;
  font-weight: 500;
}
</style>